<template>
  <el-dialog title="用户添加" :append-to-body="true" @close="closeDio" :visible.sync="dialogTableVisible" width="800px" style="padding: 20px">
    <el-row class="seaheaad">
      <el-col :span="24">
        <xzUserSearch @sendSearch="getSearch"></xzUserSearch>
      </el-col>
    </el-row>
    <el-row class="seaheaad" v-if="isAll || isPart">
      <el-col :span="4">
        <el-button :loading="$store.state.isLoading" type="success" v-if="isAll" size="small" @click="addShops({ id: '0' })">选择所有用户</el-button>
      </el-col>
      <el-col :span="4">
        <el-button :loading="$store.state.isLoading" type="primary" size="small" v-if="isPart" @click="addParts()">添加选中用户</el-button>
      </el-col>
    </el-row>
    <el-table ref="multipleTable" :data="list.data" stripe header-row-class-name="head_color" tooltip-effect="dark" style="width: 99.9%"
        @selection-change="handleSelectionChange">
      <el-table-column type="selection" class="tc" width="35"></el-table-column>

      <el-table-column label="会员" min-width="80" align="center">
        <template slot-scope="scope">
          <div class="tc">
            <img style="width: 50px; height: 50px" :src="$fnc.getImgUrl(scope.row.avatar)" class="user_img" />
            <span>{{ scope.row.rating_cn }}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="会员信息" min-width="180">
        <template slot-scope="scope">
          <div class="user_table">
            <span>用户名：</span>
            <small>{{ scope.row.username }}</small>
            <br />
            <span>昵称：</span>
            <small>{{ scope.row.nickname }}</small>
            <br />
            <span>手机号码：</span>
            <small>{{ scope.row.tel }}</small>
            <br />
            <span>推荐人：</span>
            <small>{{ scope.row.tid_cn }}</small>
            <br />
            <span>注册时间：</span>
            <small>{{ scope.row.created_time | getTimeFormat }}</small>
            <br />
          </div>
        </template>
      </el-table-column>

      <el-table-column label="下级会员数" min-width="100">
        <template slot-scope="scope">
          <div class="user_table">
            <span>直推/分销：{{ scope.row.ynumber }}</span>
            <small>{{ scope.row.yvip }}</small>
            <br />
            <span>累计/消费:</span>
            <small>{{ scope.row.buy | toFixedNum }}</small>
            <br />
            <span>累计佣金:</span>
            <small>{{ scope.row.sum_amount | toFixedNum }}</small>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="操作" min-width="80">
        <template slot-scope="scope">
          <el-row class="myblank">
            <el-button :loading="$store.state.isLoading" size="mini" @click="addShops(scope.row)" type="primary">添加</el-button>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <el-row>
      <el-col :span="24" class="table_bottom">
        <el-col :span="24" class="tr">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage1"
              :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="list.all_num">
          </el-pagination>
        </el-col>
      </el-col>
    </el-row>
  </el-dialog>
</template>
<script>
import xzUserSearch from "@/components/currency/xzUserSearch.vue";
export default {
  name: "xzuser",
  components: {
    xzUserSearch
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    showType: {
      type: String,
      default: "table"
    },
    isAll: {
      type: Boolean,
      default: false
    },
    isPart: {
      type: Boolean,
      default: false
    },
    types: {
      type: [Number, String],
      default: "",
    },
  },
  data () {
    return {
      list: [],
      currentPage1: 1,
      pageSize: 10,
      dialogTableVisible: this.show,
      loading: false,
      searchAll: {},
      multipleSelection: ""
    };
  },
  methods: {
    getSearch (obj) {
      this.loading = true;
      this.searchAll = obj;
      this.getNewsAll(this.searchAll);
    },
    getNewsAll (params) {
      this.loading = true;
      var param = {};
      if (params) {
        param = JSON.parse(JSON.stringify(params));
      }
      if (this.types) {
        param.types = this.types;
      }
      this.$api.getUser.getUserList(param).then(res => {
        if (res.data.code == 200) {
          this.list = res.data.result;
        }
        this.loading = false;
      });
      this.loading = false;
    },
    imgError (item) {
      if (!item) {
        return require("../../assets/img/default_head.png");
      }
      if (item.indexOf("http") >= 0) {
        return item;
      } else {
        return "/api/" + item;
      }
    },
    addShops (row) {
      this.$emit("sendShop", row);
      this.dialogTableVisible = false;
    },
    handleSizeChange (val) {
      var params = this.searchAll;
      params.page = "";
      params.page_size = val;
      this.getNewsAll(params);
      this.pageSize = val;
    },
    handleCurrentChange (val) {
      var params = this.searchAll;
      params.page = val;
      params.page_size = this.pageSize;
      this.getNewsAll(params);
    },
    closeDio () {
      this.$emit("isshow", false);
      this.dialogTableVisible = false;
    },
    handleSelectionChange (val) {
      //多选框赋值
      this.multipleSelection = val;
    },
    addParts () {
      this.$emit("sendShop", this.multipleSelection, "obj");
      this.dialogTableVisible = false;
    }
  },
  watch: {
    show (val1, val2) {
      if (val1 == val2) {
        return;
      }
      this.dialogTableVisible = val1;
      this.currentPage1 = 1;
    },
    dialogTableVisible (val1, val2) {
      if (val1 == val2) {
        return;
      }
      this.$emit("isshow", val1);
    }
  },

  created () {
    this.getNewsAll();
  }
};
</script>
<style lang="less" scoped>
.list_ul {
  // height: 610px;
  overflow: auto;
}
.list_card {
  padding: 15px;
  cursor: pointer;
}
.card_list {
  line-height: 2;
  padding: 5px 0 0 5px;
}
.price_card {
  color: red;
}
.image {
  height: 200px;
  max-width: none;
  max-height: none;
}
.sead {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.seaheaad {
  padding-bottom: 10px !important;
}
</style>
